<template>
 <div class="right_foot">
    <!-- <div class="bg"></div> -->
        <div class="scroll_content">
            <div class="title_box">
            <i class="iconfont icon-huore-s"></i>
            <span>熱門品種：</span>
        </div>
        <div class="content scroll-container" @mouseover="pauseScroll" @mouseout="resumeScroll">
           
        </div>
        <div class="time_scroll">
             <p>當前時間：2025/06/03 05:37:46</p>
        </div>
        </div>
    </div>
</template>
<script setup>
  import {onMounted,computed,ref,onUnmounted } from "vue"


  const originalItems = ['🍎 苹果 Apple', '🍌 香蕉 Banana', '🍊 橙子 Orange', '🍇 葡萄 Grape', '🍓 草莓 Strawberry','🍎 苹果 Apple', '🍌 香蕉 Banana', '🍊 橙子 Orange', '🍇 葡萄 Grape', '🍓 草莓 Strawberry']
const duplicatedItems = [...originalItems, ...originalItems]
 
const scrollWrapper = ref(null)
const offset = ref(0)
const itemWidth = ref(0)
const animationFrame = ref(null)
const isPaused = ref(false)
 
// 动态计算元素宽度
const calculateLayout = () => {
    if (!scrollWrapper.value) return
 
    // 获取第一个有效元素的宽度
    const firstItem = scrollWrapper.value.querySelector('.scroll-item')
    if (firstItem) {
        itemWidth.value = firstItem.offsetWidth + 40 // 包含 margin
    }
}
 
// 滚动动画
const animate = () => {
    if (isPaused.value) return
 
    offset.value -= 1
    if (-offset.value >= itemWidth.value * originalItems.length) {
        offset.value += itemWidth.value * originalItems.length
    }
 
    animationFrame.value = requestAnimationFrame(animate)
}
 
// 控制方法
const pauseScroll = () => {
    isPaused.value = true
    cancelAnimationFrame(animationFrame.value)
}
 
const resumeScroll = () => {
    isPaused.value = false
    animationFrame.value = requestAnimationFrame(animate)
}
 
// 生命周期
onMounted(() => {
    calculateLayout()
    window.addEventListener('resize', calculateLayout)
    animationFrame.value = requestAnimationFrame(animate)
})
 
onUnmounted(() => {
    window.removeEventListener('resize', calculateLayout)
    cancelAnimationFrame(animationFrame.value)
})
</script>
<style scoped lang="less">
.right_foot {
    width: 100%;
    // .bg{
    //     width:100%;
    //     height:15px;
    //     background-color:#18191e;
    // }
    .scroll_content{
     display:flex;
    align-items:center;
    justify-content: space-between;
    padding:0 15px;
    height: 30px;
    background-color:rgb(32, 43, 44);
    .time_scroll{
        color:#fff;
        opacity: .5;
        font-size:14px;
        margin-left:40px;
    }
    .title_box {
            font-size: 14px;
            color: #FFFFFF;
            opacity: .7;
            .icon-huore-s{
                margin-right:10px;
            }
    }
 
    .content {
        background-color:rgb(32, 43, 44);
        overflow: hidden;
 
        .item_box {
            width: 318px;
            height: 30px;
            // background-color: red;
        }
    }
    }
    
}
 
.scroll-container {
    overflow: hidden;
    white-space: nowrap;
    // width: 100%;
    flex:1;
    position: relative;
    background: #f0f0f0;
    // padding: 20px 0;
}
 
.scroll-content {
    display: inline-block;
    animation: scroll 40s linear infinite;
    animation-play-state: running;
    // padding:4px 0;
}
 
.scroll-content span {
    
    display: inline-block;
    padding: 2px 5px;
    // background: #fff;
    // border-radius: 5px;
    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    // margin: 0 20px;
    color:#fff;
    opacity: .7;
    font-size:14px;
    display:inline-block;
    border-right:1px solid #999;
    // border:1px solid red;
}
 
@keyframes scroll {
    from {
        transform: translateX(0);
    }
 
    to {
        transform: translateX(-50%);
    }
  }
</style>